<template>
  <div class="admin-mian">
    <div class="admin-menu">
      <div class="menu-bt bt1" @click="gouser()">用户管理</div>
      <div class="menu-bt" @click="gousermsg()">信息管理</div>
      <div class="menu-bt" @click="goaudit()">审核管理</div>
      <div class="menu-bt" @click="goliuyan()">留言管理</div>
    </div>
    <div class="main-content">

      <div class="content-top">
        <div>用户管理列表</div>
        <div class="img"><img src="/static/img/sousuo.svg" alt=""></div>
      </div>
      <div class="user">
        <usermain :msglist="this.list" />
      </div>

      <div class="main-paging">
        <div class="paging-number" id="number" v-for="(item, index) in this.number" :key="item">
          <div class="paging-bt" :class="index + 1 == this.as ? 'onbt' : ''" @click='bt(item)'>
            <p>{{ item }}</p>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import router from '@/router'
import axios from 'axios'
import usermain from '@/components/usermain.vue'

export default {
  props: ['msglist'],
  components: {
    usermain
  },
  data () {
    return {
      as: 1,
      number: 1,
      list: []
      // list: {
      //   number: 1,
      //   msglist: []
      // }
    }
  },
  mounted () {
    axios.get('/api/usermsg/1').then(res => {
      console.log(res.data.pages)
      this.number = res.data.pages
      this.list = res.data.records
    })
  },
  methods: {
    gouser () {
      router.push('/index/user')
    },

    gousermsg () {
      router.push('/index/usermsg')
    },

    goaudit () {
      router.push('/index/audit')
    },

    goliuyan () {
      router.push('/index/liuyan')
    },
    bt (item) {
      switch (item) {
        case item:
          console.log(item)
          this.as = item
          this.msg(item)
          break
        default:
          break
      }
    },
    // 页数
    msg (current) {
      axios.get('/api/usermsg/' + current).then(res => {
        // console.log(res.data.pages)
        this.list = res.data.records
      })
    }
  }

}

</script>

<style scoped lang="scss">
.user {
  overflow-y: auto;
  flex: 1;
}

.admin-mian {
  height: 100%;
  display: flex;
  flex-direction: row;
  font-size: 14px;
}

.admin-menu {
  height: 100%;
  border-right: 1px solid #CCCCCC;
  display: flex;
  flex-direction: column;

  .menu-bt {
    width: 100px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #CCCCCC;
  }

  .menu-bt:hover {
    background-color: #0099CC;
  }
}

.main-content {
  height: calc(100vh - 100px);
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bt1 {
  background-color: #0099CC;
}

.content-top {
  width: 100%;
  height: 60px;
  background-color: #0099CC;
  font-size: 22px;
  line-height: 60px;
  padding: 0 20px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;

  .img {
    width: 30px;
    height: 30px;
    align-self: center;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.main-paging {
  width: calc(100vh - 40px);
  padding: 10px 0;
  margin: auto;
  display: flex;
  overflow-x: auto;
  border-top: 1px solid #CCCCCC;

  .paging-number {
    display: flex;
    cursor: pointer;

  }

  .paging-bt {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 0 10px;
    text-align: center;
    line-height: 20px;
    background-color: #0099CC;
    color: #ffffff;
    font-size: 12px;
  }

  .onbt {
    background-color: red;
  }


}
</style>
